<template>
  <h1>1. 直接获取 {{ $store.state.count }}</h1>
  <h1>2. 通过computed {{ myCount }}</h1>
  <h1>3. 通过mapState {{ count }}</h1>

  <!-- commit(mutation的名字，传递给这个mutation的参数) -->
  <button @click="$store.commit('increment')">count++</button>
  <button @click="$store.commit('jianshao', 10)">count-10</button>

  <!-- 这些映射的函数，第一个参数就是 mutation 的 payload -->
  <button @click="increment">count++</button>
  <button @click="decrement">count--</button>

  <hr />
  <!-- dispatch(action的名字，传递给这个action的参数) -->
  <button @click="$store.dispatch('asyncIncrement', 10)">直接派发动作</button>
  <button @click="$store.dispatch('asyncDecrement')">直接派发动作</button>

  <button @click="asyncIncrement">辅助函数派发动作</button>
  <button @click="asyncDecrement">辅助函数派发动作</button>

  <hr />
  <h1>1. 直接获取 {{ $store.getters.plusCount }}</h1>
  <h1>2. 通过computed {{ myPlusCount }}</h1>
  <h1>3. 通过mapGetters {{ plusCount }} {{ reverseMsg }}</h1>

  <BasicLayout />
</template>

<script>
// 可以使用 alias 路径别名，找路径会比较方便，后续如果路径发生变化，只需要修改一处即可
import BasicLayout from "@/layout/basic-layout.vue";

// 引入 Vuex 中的辅助函数
/**
 * mapState，mapGetters
 *    配合 computed 使用
 *
 *    语法：
 *      mapState(['state1', 'state2'])
 *      返回的格式如下
 *      {
 *        state1() {
 *          return this.$store.state.state1
 *        },
 *        state2() {
 *          return this.$store.state.state2
 *        }
 *      }
 *
 *      mapState({
 *        key1: 'count'
 *      })
 *      返回的格式如下
 *      {
 *        key1() => {
 *          return this.$store.state.count
 *        }
 *      }
 *
 */

/**
 * mapMutations,mapActions
 *    配合组件的 methods 选项使用
 *    返回的是一个对象，可以使用展开运算符来玩。
 */
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  components: {
    BasicLayout,
  },

  // 不推荐如下写法，原因是没办法写组件自己的 computed 了。
  // computed: mapState(["count"]),
  // 推荐使用展开运算符的方式，如下
  computed: {
    ...mapState(["count"]), // 映射 仓库中的 count 到组件的 count 上
    ...mapState({
      key1: "count", // 映射 仓库中的 count 到组件的 key1 上
    }),
    ...mapGetters(["plusCount", "reverseMsg"]), // 映射仓库中的 plusCount 到组件的 plusCount, 仓库中的 reverseMsg 到组件的 reverseMsg
    myCount() {
      return this.$store.state.count;
    },
    myPlusCount() {
      return this.$store.getters.plusCount;
    },
  },

  methods: {
    /**
     * 映射 仓库中的 increment 这个 mutation 到组件的 increment 这个方法上
     * 映射 仓库中的 decrement 这个 mutation 到组件的 decrement 这个方法上
     */
    ...mapMutations(["increment", "decrement"]),
    /**
     * store asyncIncrement  => 组件 asyncIncrement
     * store asyncDecrement  => 组件 asyncDecrement
     */
    ...mapActions(["asyncIncrement", "asyncDecrement"]),
  },

  mounted() {
    console.log("===this.$store", this.$store);
  },
};
</script>
